<template>
  <section>
    <br />
    <el-form :model="form" ref="form" :rules="FormRules">
      <div style="border: 1px solid #e6e6e6;margin-bottom: 10px;padding:15px">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item
              label="用例分类:"
              label-width="83px"
              prop="getCaseTypeFirstID"
            >
              <el-select
                disabled
                v-model="form.getCaseTypeFirstID"
                placeholder="请选择用例分类"
              >
                <el-option
                  v-for="(item, index) in caseType"
                  :key="index + ''"
                  :label="item.code_name"
                  :value="item.code_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="所属项目:"
              label-width="83px"
              prop="getProjectFirstID"
            >
              <el-select
                disabled
                v-model="form.getProjectFirstID"
                placeholder="请选择项目列表"
              >
                <el-option
                  v-for="(item, index) in project"
                  :key="index + ''"
                  :label="item.project_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="用例名称:" label-width="83px" prop="case_name">
              <el-input
                disabled
                v-model.trim="form.case_name"
                prefix-icon="el-icon-edit el-input__icon"
                placeholder="请输入用例名称"
                auto-complete
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="接口名称 :"
              label-width="83px"
              name="getApiFirstID"
            >
              <el-select
                disabled
                v-model="form.getApiFirstID"
                placeholder="请选择接口名称"
                @change="getHeader"
              >
                <el-option
                  v-for="(item, index) in apiName"
                  :key="index + ''"
                  :label="item.interface_name_zh"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-row :span="24">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="入参变量" name="2">
            <el-table :data="form.param" highlight-current-row>
              <el-table-column prop="value" label="key" min-width="15%">
                <template slot-scope="scope">
                  <el-input
                    v-model.trim="scope.row.param_key"
                    :value="scope.row.param_key"
                    placeholder=""
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value" label="value" min-width="25%">
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="scope.row.param_value"
                    :value="scope.row.content"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="值"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="" label="" min-width="50%">
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-row>

      <el-row :span="22">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="校验" name="3">
            <div style="margin: 5px">
              <el-row :span="24"> </el-row>
            </div>
            <div
              style="border: 1px solid #e6e6e6;margin-bottom: 10px;padding:15px"
            >
              <el-row :gutter="15">
                <el-col :span="8">
                  <el-form-item
                    label="校验分类:"
                    label-width="83px"
                    name="getCheckTypeFirstID"
                  >
                    <el-select
                      disabled
                      v-model="form.getCheckTypeFirstID"
                      placeholder="请选择校验分类"
                      @change="changeCheckType"
                    >
                      <el-option
                        v-for="(item, index) in checkType"
                        :key="index + ''"
                        :label="item.code_name"
                        :value="item.code_id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="执行条件:"
                    label-width="83px"
                    name="ActionConditionFirstID"
                    v-if="showActionCondition"
                  >
                    <el-select
                      disabled
                      v-model="form.ActionConditionFirstID"
                      placeholder="选择执行条件"
                      @change="changeActionCondition"
                    >
                      <el-option
                        v-for="(item, index) in ActionCondition"
                        :key="index + ''"
                        :label="item.code_name"
                        :value="item.code_id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <el-table
              :data="form.responseArea"
              highlight-current-row
              v-if="ShowParameterType"
            >
              <el-table-column prop="key" label="校验Key" min-width="14%">
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="scope.row.check_key"
                    :value="scope.row.key"
                    prefix-icon="el-icon-edit el-input__icon"
                    el-
                    placeholder="请输入校验key"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="tiaojian" label="校验条件" min-width="14%">
                <template slot-scope="scope">
                  <el-select
                    disabled
                    v-model="scope.row.check_condition"
                    placeholder="校验条件"
                  >
                    <el-option
                      v-for="(item, index) in CheckCondition"
                      :key="index + ''"
                      :label="item.code_name"
                      :value="item.code_id"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="zhengze"
                label="预期值/正则"
                min-width="14%"
              >
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="scope.row.expect_value"
                    :value="scope.row.zhengze"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入预期值/正则"
                  ></el-input>
                </template>
              </el-table-column>
              <!--runCondition-->

              <el-table-column prop="tiaojian" label="执行条件" min-width="14%">
                <template slot-scope="scope">
                  <el-input
                    v-model.trim="scope.row.action_condition"
                    :value="runCondition"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>

              <!-- <el-table-column label="操作" min-width="5%">
                                <template slot-scope="scope">
                                    <i class="el-icon-delete" style="font-size:30px;cursor:pointer;" @click="delResponse(scope.$index)"></i>
                                   </template>
                            </el-table-column>
                            <el-table-column label="" min-width="5%">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.$index===(form.responseArea.length-1)" size="mini" class="el-icon-plus" @click="addResponse"></el-button>
                                </template>
                            </el-table-column> -->
            </el-table>
            <el-table :data="form.sqlArea" highlight-current-row v-if="showsql">
              <el-table-column prop="sql" label="执行sql" min-width="14%">
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="scope.row.check_sql"
                    :value="scope.row.check_sql"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入sql"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="sqlExpect"
                label="预期值/正则"
                min-width="14%"
              >
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="scope.row.expect_value"
                    :value="scope.row.expect_value"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入预期值/正则"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-row>
    </el-form>

    <br />
    <br />
    <!--
        <router-link :to="{ name: '接口列表', params: {project_id: this.$route.params.project_id}}" style='text-decoration: none;color: aliceblue;'>
            <el-button class="return-list" style="float: right">返回</el-button>
        </router-link>-->
    <el-button class="return-list" style="float: right" @click.native="back"
      >返回</el-button
    >
  </section>
</template>

<script>
import { test } from "../../../../api/api";
import $ from "jquery";

import {
  addCase,
  getCheckConditionList,
  addInterface,
  getProjectList,
  getModelList,
  getCheckTypeList,
  getCaseTypeList,
  getApiList,
  getActionConditionList,
} from "../../../../api/api";
export default {
  data() {
    return {
      ShowParameterType: false,
      showActionCondition: false,
      showsql: false,

      addParameterFormVisible: false, //增加入参

      CheckCondition: [],
      ActionCondition: [],

      //radio: "form-data",

      addParameterFormVisible: false, //增加入参
      radioType: "",
      result: true,
      activeNames: ["1", "2", "3", "4", "5", "6"],
      id: "",
      runCondition: "",

      //aaaa:true,
      // vm.$set(vm.items, indexOfItem, newValue)
      form: {
        head: [],
        param: [],

        getProjectFirstID: "", //所属项目
        getApiFirstID: "", //接口名称
        getCaseTypeFirstID: "", //用例分类
        //getModelFirstID:'',
        case_name: "", //用例名称

        responseArea: [
          { key: "", exetiaojian: "_type2", zhengze: "", tiaojian: "" }, //, //依赖默认给1
        ],

        sqlArea: [
          { sql: "", zhengze: "" }, //依赖默认给1
        ],

        data: "",
      },
    };
  },
  methods: {
    cellcb(row) {
      if (row.row.checkStatus === 1 && row.columnIndex === 0) {
        return "myCell";
      }
    },
    checkRequest() {
      let request = this.form.requestType;
      if (request === "GET" || request === "DELETE") {
        this.request3 = false;
      } else {
        this.request3 = true;
      }
    },
    isJsonString(str) {
      try {
        if (typeof JSON.parse(str) === "object") {
          return true;
        }
      } catch (e) {}
      return false;
    },
    handleResponseEdit: function(index, row) {
      this.yilaiVisible = true;
      this.id = index;
    },

    getProjects() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getProjectList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          var projectjsonArr = new Array();

          for (var i = 0; i < data.length; i++) {
            if (data[i].status == 0) {
              projectjsonArr.push(data[i]);
            }
          }

          self.project = projectjsonArr;
          self.form.getProjectFirstID = self.project[0].id;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    getApis() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getApiList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          var apijsonArr = new Array();

          for (var i = 0; i < data.length; i++) {
            if (data[i].delete_flag == 0) {
              apijsonArr.push(data[i]);
            }
          }
          self.apiName = apijsonArr;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    //校验条件
    getCheckConditions() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getCheckConditionList(headers, params).then((_data) => {
        let { msg, code, data } = _data;

        if (code === "999999") {
          self.CheckCondition = data;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    //执行条件
    getActionConditions() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };

      getActionConditionList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          self.ActionCondition = data;
          //self.form.ActionConditionFirstID = self.ActionCondition[0].code_id
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    getCheckType() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getCheckTypeList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          self.checkType = data;

          // self.form.getCheckTypeFirstID = self.checkType[0].code_id
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },
    getCaseType() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getCaseTypeList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          self.caseType = data;

          self.form.getCaseTypeFirstID = self.caseType[0].code_id;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },
    changeCheckType(label) {
      //action_condition  1与0或
      //check_type  0response 1 database
      if (label === "0") {
        //*******db
        (this.ShowParameterType = true),
          (this.showsql = false),
          (this.showActionCondition = true);
      } else if (label === "1") {
        //***********数据库修改这个一定要变
        (this.ShowParameterType = false),
          (this.showActionCondition = false),
          (this.showsql = true);
      } else {
        (this.ShowParameterType = false),
          (this.showActionCondition = false),
          (this.showsql = false);
      }
    },

    changeActionCondition(value) {
      let obj = this.ActionCondition.find((i) => {
        return i.code_id === value;
      });
      let runCondition = obj.code_name;

      for (var i = 0; i < this.form.responseArea.length; i++) {
        this.form.responseArea[i].action_condition = runCondition;
      }

      //this.runCondition=runCondition
      this.$forceUpdate();
    },

    getHeader(value) {
      let self = this;
      let param = { interfaceId: value };
      $.ajax({
        type: "get",
        url: test + "/api/api/case_getHeader",
        async: true,
        data: param,
        headers: {
          Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
        },
        timeout: 5000,
        success: function(data) {
          if (data.code === "999999") {
            var dataHeader = data.data.header;
            //self.id = data.id;

            if (dataHeader.length) {
              self.form.head = dataHeader;
            }

            var dataParam = data.data.params;

            if (dataParam.length) {
              self.form.param = dataParam;
            }
          } else {
            self.$message.error({
              message: data.msg,
              center: true,
            });
          }
        },
      });
    },

    editParameterSubmit: function() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.form.requestList[this.id] = this.editForm;
          this.addParameterFormVisible = false;
        }
      });
    },
    handleParameterEdit: function(index, row) {
      this.addParameterFormVisible = true;
      this.id = index;
      this.editForm = Object.assign({}, row);
    },

    back() {
      this.$router.go(-1);
    },

    cellcb(index) {
      // txt.style.display = "none";
      //this.form.responseList.splice(index, 1);

      if (index.row.checkStatus === 1 && index.row.columnIndex === 0) {
        return "myCell";
      }
    },

    handleChange(val) {},
    onSubmit() {},
    getCaseInfo() {
      let self = this;
      let param = {
        case_id: this.$route.params.case_id,
      };
      $.ajax({
        type: "get",
        url: test + "/api/case/case_info",
        async: true,
        data: param,

        headers: {
          Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
        },
        timeout: 5000,

        success: function(data) {
          if (data.code === "999999") {
            data = data.data;
            self.form.getCaseTypeFirstID = data.case[0].case_type_name;
            self.form.getProjectFirstID = data.case[0].project;
            self.form.case_name = data.case[0].case_name;

            self.form.getApiFirstID = data.case[0].interface;

            if (data.case[0].check_type == 0) {
              //走responses
              self.form.getCheckTypeFirstID = data.case[0].check_type; //0
              (self.ShowParameterType = true),
                (self.showsql = false),
                (self.showActionCondition = true);
              self.form.ActionConditionFirstID = data.case[0].action_condition;

              /**
                                操作json-将执行条件追加到json
                                */

              var make_json = new Array();
              var json_tem = data.check;

              for (var i = 0; i < json_tem.length; i++) {
                make_json.push(json_tem[i]);
                var action_condition_name = "";

                if (data.case[0].action_condition == "0") {
                  action_condition_name = "或（or）";
                } else if (data.case[0].action_condition == "1") {
                  action_condition_name = "与（and）";
                }
                make_json[i]["action_condition"] = action_condition_name;
              }

              self.$forceUpdate();
              if (data.check.length) {
                //form.responseArea
                self.form.responseArea = [];
                data.check.forEach((item) => {
                  self.form.responseArea.push(item);
                });
              }
            } else if (data.case[0].check_type == 1) {
              //走database
              self.form.getCheckTypeFirstID = data.case[0].check_type; //1
              (self.ShowParameterType = false),
                (self.showActionCondition = false),
                (self.showsql = true);
              if (data.check.length) {
                //form.responseArea
                self.form.sqlArea = [];
                data.check.forEach((item) => {
                  self.form.sqlArea.push(item);
                });
              }
            }
            if (data.param.length) {
              self.form.param = [];
              data.param.forEach((item) => {
                self.form.param.push(item);
              });
            }
          } else {
            self.$message.error({
              message: data.msg,
              center: true,
            });
          }
        },
      });
    },
  },
  watch: {
    radio() {
      this.changeParameterType();
    },
  },
  mounted() {
    this.getProjects();
    this.getCaseInfo();

    this.getCaseType();
    this.getApis();
    this.getHeader();
    this.getCheckType();
    this.getActionConditions();
    this.getCheckConditions();
    this.getActionConditions();
  },
};
</script>
<!--style 样式-->
<style lang="scss" scoped>
.return-list {
  margin-top: 0px;
  margin-bottom: 10px;
  border-radius: 25px;
}
.head-class {
  font-size: 17px;
}
.parameter-a {
  display: block;
}
.parameter-b {
  display: none;
}
.selectInput {
  position: absolute;
  /*margin-left: 7px;*/
  padding-left: 9px;
  width: 180px;
  /*border-radius:0px;*/
  /*height: 38px;*/
  left: 1px;
  border-right: 0px;
}
</style>
<style lang="scss">
.selectInput {
  input {
    border-right: 0px;
    border-radius: 4px 0px 0px 4px;
  }
}
</style>

<style>
.myCell .el-checkbox__input {
  display: none;
}
</style>
